<template>
  <div :class="className" style="width: 100%;" />
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
import { projectCount, projectCountByYear } from '@/api/project/project'
import { initProjectData } from '@/utils/3dChart'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    }
  },
  data() {
    return {
      chart: null,
      seriesData: {
        totalData: 0,
        xAxisData: [],
        seriesData: []
      }
    }
  },
  mounted() {
    this.initSeverice()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
        this.chart.setOption(this.initOption('项目数', this.seriesData.xAxisData, this.seriesData.seriesData))
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /* echart初始化*/
    initEchart() {
      this.chart = echarts.init(this.$el, 'macarons')
    },
    initSeverice() {
      projectCount().then(res => {
        console.log(res, typeof res)
      })
      projectCountByYear().then(object => {
        this.dataSource = object
        this.updateChartBySelect()
        this.$emit('updateYearOptions', { minYear: object?.minYear, maxYear: object?.maxYear })
      })
    },
    updateChartBySelect(startYear = '', endYear = '') {
      const [data, cubeData] = initProjectData(this.dataSource, startYear, endYear)
      this.seriesData.xAxisData = data.map(item => item.name)
      this.seriesData.seriesData = data.map(item => item.count)
      this.seriesData.totalData = data.reduce((prev, current) => {
        return prev + (current.count || 0)
      }, 0)
      this.$emit('projectTotalData', this.seriesData.totalData, cubeData)
      !this.chart && this.initEchart()
      this.chart.setOption(this.initOption('项目数', this.seriesData.xAxisData, this.seriesData.seriesData))
    },
    initOption(name, xAxis, serices) {
      var Option = {
        baseOption: {
          title: {
            subtext: '',
            bottom: '0%',
            left: '2%'
          },
          tooltip: false,
          calculable: true,
          grid: {
            left: 50,
            right: 0,
            top: 40,
            bottom: 40,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function(params) {
                    return params.value.replace('\n', '')
                  }
                }
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                interval: 0,
                rotate: 0,
                fontSize: 14,
                color: '#606266'
              },
              data: xAxis,
              splitLine: { show: false },
              axisLine: { show: false },
              axisTick: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: name + '（个）',
              nameGap: 40,
              min: 0,
              // max: 100,
              interval: 10, // 只显示整数
              axisLabel: {
                fontSize: 14,
                color: '#606266'
              },
              nameTextStyle: {
                fontSize: 14,
                color: '#606266' // 设置Y轴名称颜色
              },
              splitArea: {
                show: false // 隐藏Y轴区域背景
              },
              axisLine: { show: false }, // 隐藏Y轴线
              axisTick: { show: false }, // 隐藏Y轴刻度
              splitLine: {
                show: true, // 显示Y轴分割线
                lineStyle: {
                  type: 'solid', // 分割线样式为实线
                  color: '#0B8A931A' // 分割线颜色
                }
              }
            }
          ],
          series: [
            { name: name,
              type: 'bar',
              barWidth: '30%', // 柱图宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#3BCDD7' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#02B6C2' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
                barBorderRadius: [5, 5, 0, 0]
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 24,
                color: 'var(--ui-theme-color)'
              },
              emphasis: { // 添加悬浮效果
                itemStyle: {
                  color: '#02B6C2' // 悬浮时的颜色
                }
              },
              data: serices
            }
          ]
        }
      }
      return Option
    }
  }
}
</script>

<style scoped lang="scss">
  .chart{
    height: 100%;
  }
</style>
